<template>
  <div class="sex">
    <div class="tabs">
      <van-tabs line-width="20px" line-height="3px" color="#06A255">
        <van-tab @click="selectItem($event,index)"  v-for="(list, index) in tabs" :key="index" :title="list.name">
          <!-- 内容 {{ index }} -->
        </van-tab>
      </van-tabs>
    </div>
    <div class="like">
      <ul>
        <li>
          <img src="../../assets/img/yaotu.png" />
          <p class="p1">999感冒灵</p>
          <p class="p2">清热解毒，清热解毒，清热解毒</p>
          <div class="qian">
              <p class="p3"><span>￥</span>272.00</p>
              <p class="p4">立即购买</p>
          </div>
        </li>
        <li>
          <img src="../../assets/img/yaotu.png" />
          <p class="p1">999感冒灵</p>
          <p class="p2">清热解毒，清热解毒，清热解毒</p>
          <div class="qian">
              <p class="p3"><span>￥</span>272.00</p>
              <p class="p4">立即购买</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs:[
          {name:'复固本',color:true},
          {name:'肾炎肾病',color:false},
          {name:'男科炎症',color:false},
          {name:'前列腺',color:false},
          {name:'肾炎肾病',color:false},
          {name:'男科炎症',color:false},
          {name:'前列腺',color:false}
        ],
        select:0,
      }
    },
    mounted () {
      
    },
    methods: {
      selectItem(e,index){
        if (index == 0) {
          this.select = 0;
        } else if (index == 1) {
          this.select = 1;
        } else if (index == 2) {
          this.select = 2;
        } else if (index == 3) {
          this.select = 3;
        } else if (index == 4) {
          this.select = 4;
        }
      },
    },
  }
</script>

<style scoped>
.sex{
  width: 100%;
  border-top: 1px solid #F6F6F6;
}
.van-tabs{
  height: 84px;
}
.tabs{
  width: 100%;
  position: relative;
  box-sizing:border-box;
  overflow:hidden;
  white-space: nowrap;
  height: 84px;
  font-size:32px;
}



/* 猜你喜欢 */
.like{
  width: 100%;
  margin-bottom: 98px;
}
.like ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.like ul li{
  width: 50%;
  height: 540px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.like li img{
  width: 337px;
  height: 337px;
}
.like li .p1{
  font-size: 34px;
  color: #333;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap;
}
.like li .p2{
  font-size: 28px;
  color: #ccc;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top: 10px;
}
.like li .qian{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.like li .qian .p3{
  font-size: 34px;
  color: #c94451;
}
.like li .qian .p3 span{
  font-size: 28px;
}
.like li .qian .p4{
  width: 132px;
  height: 55px;
  background: #06a255;
  font-size: 28px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  border-radius:28px;
}
</style>

<style>
.van-tabs__line{
  bottom: 1PX !important;
}
.van-tab{
  font-size: 28px;
}
</style>